<template>
  <div>

    <!-- <el-alert :closable="false" title="三级菜单1" type="success" /> -->
    <el-page-header @back="goBack" content="人口信息详情">
    </el-page-header>
    <div class="insertPopulation">


      <el-form ref="insertForm" :model="insertForm" label-width="140px" :inline="true">
        <div>
          <el-form-item label="所属小区:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
            <el-select disabled v-model="insertForm.residentialIdArray" multiple style="width: 262px;" placeholder="">
              <el-option v-for="item in residentialData" :key="item.residentialId" :label="item.name"
                :value="item.residentialId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份标识:" :label-width="formLabelWidth" class="formItemStyle" prop="phoneNumber">
            <el-select disabled v-model="insertForm.specialCodeArray" multiple style="width: 262px;" placeholder="">
              <el-option v-for="item, i in specialCodeData" :key="i" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="姓名:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
            <el-input disabled maxlength="10" v-model="insertForm.name" autocomplete="off" placeholder=""
              style="width: 262px"></el-input>
          </el-form-item>

          <el-form-item label="手机号:" :label-width="formLabelWidth" class="formItemStyle" prop="phoneNumber">
            <el-input disabled maxlength="20" v-model="insertForm.phoneNumber" autocomplete="off" placeholder=""
              style="width: 262px"></el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="性别:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.gender" placeholder="" style="width: 262px;">
              <el-option v-for="item in genderListData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="出生日期:" :label-width="formLabelWidth" class="birthdayDateItemStyle">
            <el-date-picker disabled type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"
              v-model="insertForm.birthday" style="margin-left:2px;width: 262px;" placeholder="">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="民族:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.nation" placeholder="" style="width: 262px;">
              <el-option v-for="item in nationOptionData" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>


        <div>

          <el-form-item label="证件类型:" :label-width="formLabelWidth" class="formItemStyle">
            <div class="block">
              <el-select disabled v-model="insertForm.idCardType" placeholder="" style="width: 262px;">
                <el-option v-for="item in idCardTypeOptionData" :key="item.id" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="证件号码:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled maxlength="20" v-model="insertForm.idNumber" placeholder="" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="居住状态:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select disabled v-model="insertForm.residentialStatus" placeholder="" style="width: 262px;">
            <el-option v-for="item in residentialStatusOpion" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="家庭住址:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.homeAddress" placeholder="" autocomplete="off"
              style="width: 680px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="婚姻状况:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.maritalStatus" placeholder="" style="width: 262px;">
              <el-option v-for="item in maritalStatusOptionData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="政治面貌:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.partyMemberName" placeholder="" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="身份类型:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select disabled v-model="insertForm.identityType" placeholder="" style="width: 262px;">
            <el-option v-for="item in identityTypeOptionData" :key="item.id" :label="item.name" :value="item.value * 1">
            </el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="文化程度:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.educationLevel" placeholder="" style="width: 262px;">
              <el-option v-for="item in educationLevelOptionData" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="国籍:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.nationality" placeholder="" style="width: 262px;">
              <el-option v-for="item in nationalityOptionData" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="籍贯:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="insertForm.nativePlace" placeholder="" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="职业:" :label-width="formLabelWidth" class="formItemStyle">
            <el-select disabled v-model="insertForm.occupation" placeholder="请选择职业" style="width: 262px;">
              <el-option v-for="item in occupationData" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="工作单位:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.company" placeholder="" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="单位联系人手机号:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="insertForm.companyContacts" placeholder="" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="单位地址:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.companyAddress" placeholder="" autocomplete="off"
              style="width: 680px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="紧急联系人手机号:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.emergencyContact" placeholder="" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="备注:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="insertForm.notes" autocomplete="off" placeholder=""
              style="width: 262px"></el-input>
          </el-form-item>
        </div>
      </el-form>


    </div>
  </div>
</template>




<script>
import {
  insertPopulation,
  getDictionaryList,
  getPopulationDetail,
  updatePopulationInfo,
} from "./population";
export default {

  data() {

    return {
      formLabelWidth: "140px", //控制前面label的宽度
      insertForm: {
      },
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      residentialStatusOpion: [
        { id: '0', name: "空置" }, { id: '1', name: "在住" }
      ],
      maritalStatusOptionData: [
        { id: 0, name: "单身" }, { id: 1, name: "未婚" }, { id: 2, name: "已婚" }
      ],
      nationOptionData: [],
      nationalityOptionData: [],
      idCardTypeOptionData: [],
      identityTypeOptionData: [],
      educationLevelOptionData: [],
      specialCodeData: [],
      residentialData: [],
      occupationData: [],
    }
  },

  async activated() {
    //初始化选项数据
    await this.getOccupationData() //获取职业
    await this.getSpecialCodeArray()
    await this.getResidentialData()
    await this.getNationOptionData()
    await this.getNationalityOptionData();
    await this.getIdCardTypeOptionData();
    await this.getIdentityTypeOptionData();
    await this.getEducationLevelOptionData();

    this.getPopulationInfo(this.$route.query.id);
  },


  methods: {

    async getOccupationData() {
      let res = await this.$api.customer.myDictionaryQueryList('occupation')
      if (res.code == 200) {
        this.occupationData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getResidentialData() {
      let res = await this.$api.patrol.myPatrolGetCommunityList('')
      if (res.code == 200) {
        this.residentialData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getSpecialCodeArray() {
      let res = await this.$api.customer.myDictionaryQueryList('special_code')
      if (res.code == 200) {
        this.specialCodeData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    goBack() {
      // this.$router.go(-1)
      this.$router.push({ path: '/population/management' });
    },

    getPopulationInfo(id) {
      getPopulationDetail(id).then((res) => {
        if (res.code == 200) {
          this.insertForm = res.data
          this.insertForm.residentialNames = this.insertForm.residentialNameArray.join(',')
          this.insertForm.identityType = this.insertForm.identityType == 0 ? '' : this.insertForm.identityType
          console.log(666666, this.insertForm)
        } else {
          this.$message.error(res.message)
        }

      })
    },
    /**
     * 民族字典数据
     */
    async getNationOptionData() {
      let res = await this.$api.system.myGetNationList()
      if (res.code == 200) {
        this.nationOptionData = res.data;
        console.log(666661)
      } else {
        this.$message.error(res.message)
      }
    },


    /**
     * 证件类型字典数据
     */
    async getIdCardTypeOptionData() {
      await getDictionaryList("id_card_type").then((res) => {
        this.idCardTypeOptionData = res.data;
        console.log(666663)
      })
    },


    /**
     * 身份类型字典数据
     */
    async getIdentityTypeOptionData() {
      await getDictionaryList("identity_type").then((res) => {
        this.identityTypeOptionData = res.data;
        console.log(666664)
      })
    },

    /**
     * 文化程度字典数据
     */
    async getEducationLevelOptionData() {
      await getDictionaryList("education_level").then((res) => {
        this.educationLevelOptionData = res.data;
        console.log(666665)
      })
    },

    /**
     * 国籍字典数据
     */
    async getNationalityOptionData() {
      let res = await this.$api.system.myGetNationalityList()
      if (res.code == 200) {
        this.nationalityOptionData = res.data;
        console.log(666662)
      } else {
        this.$message.error(res.message)
      }
      // getDictionaryList("nationality").then((res) => {
      //   this.nationalityOptionData = res.data;
      // })
    },




  }
};
</script>

<style scoped>
.insertPopulation {
  margin-top: 90px;
  margin-left: 130px;
  height: 50%;
}

.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}
</style>
